<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: 'Itim',cursive;
        }
        body{
            background-color: #333;
        }
        .background{
            text-align: center;
            background-color: #333;
        }
        .container{
            margin: 0 auto;
            display: grid;
            grid-template-columns: 33% 33% 33%;
            grid-template-rows: 33% 33% 33%;
            max-width: 300px;
        }
        .tile{
            border: 1px solid white;
            min-width: 100px;
            min-height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            cursor: pointer;
        }
        .playerX{
            color: #09c372;
        }
        .playerO{
            color: #498AFB;
        }
        .titel{
            color: white;
            padding-bottom: 20px;
        }
        .display{
            color: white;
            padding-bottom: 20px;
        }
        button{
            background-color: rgb(228, 49, 144);
            border-radius: 5px;
            color: white;
            width: 85px;
            height: 35px;
            border: none;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <main class="background">
        <section class="titel">
            <h1>井字游戏</h1>
        </section>
        <section class="display">
            玩家<span class="display-player playerX">x</span>的回合
        </section>
        <section class="container">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </section>
        <section class="display announcer hide"></section>
        <section class="controls">
            <button id="reset">重新开始</button>
        </section>
    </main>
</body>
<!-- <script src="/index.js"></script> -->
<script>
    // 拿到9个div
    const tiles = Array.from(document.querySelectorAll('.tile'))
    // 获取当前玩家的DOM节点
    const playerDisplay = document.querySelector('.display-player')
    // 获取当前重置按钮
    const resetButton = document.querySelector('#reset')
    // 获取游戏结束显示的语句
    const announcer = document.querySelector('.announcer')

    // 创建一个空数组，保存用户点击的数据
    let board = ['','','','','','','','','']
    // 创建一个变量，代表当前用户
    let currentPlayer = 'X'
    // 创建一个变量，true表示游戏正在进行，false为游戏结束
    let isGameActive = true

    // 三个变量表示游戏的结束状态，PLAYERX_WON为x玩家获胜，PLAYERO_WON为O玩家获胜，TIE为平局
    const PLAYERX_WON = 'PLAYERX_WON'
    const PLAYERO_WON = 'PLAYERO_WON'
    const TIE = 'TIE'

    // 定义一个数组，保存游戏获胜的条件
    const winningConditions = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,3,6],
        [1,4,7],
        [2,5,8],
        [0,4,8],
        [2,4,6]
    ]

    // 判断操作是否有效，如果div里没有值，就为有效
    const isValidAction = (tile)=>{
        if(tile.innerText === 'X' || tile.innerText === "O"){
            return false
        }
        return true
    }

    // 保存用户点击的数据(玩家的符号)
    const updateBoard = (index) => {
        board[index] = currentPlayer
    }

    // 定义changePlayer函数来处理玩家的交换（更改当前播报显示的玩家）
    const changePlayer = () => {
        playerDisplay.classList.remove(`player${currentPlayer}`)
        currentPlayer = currentPlayer === 'X'? 'O':'X'
        playerDisplay.innerText = currentPlayer
        playerDisplay.classList.add(`player${currentPlayer}`)
    }

    // 定义一个函数，来宣布游戏结果,并将结果返回呈现在页面上
    const announce = (type) => {
        switch(type){
            case PLAYERO_WON:
                announcer.innerHTML = '恭喜 <span class="playerO">O</span> 玩家获胜'
                break
            case PLAYERX_WON:
                announcer.innerHTML = '恭喜 <span class="playerX">X</span> 玩家获胜'
                break
            case TIE:
                announcer.innerHTML = '平局'
        }
        announcer.classList.remove('hide')
    }

    // 循环判断玩家是否获胜
    function handleResultValidation() {
        let roundWon = false
        for(let i=0;i<=7;i++){
            const winCondition = winningConditions[i]
            const a = board[winCondition[0]]
            const b = board[winCondition[1]]
            const c = board[winCondition[2]]
            if(a === '' || b === '' || c === ''){
                continue
            }
            if(a === b && b === c){
                roundWon = true
                break
            }
        }

        if(roundWon){
            announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON)
            isGameActive = false
            return
        }

        if(!board.includes("")) announce(TIE)
    }

    // 定义一个函数，交换为到下一个玩家来操作并显示上一个玩家的操作
    const userAction = (tile,index) => {
        if(isValidAction(tile) && isGameActive){
            tile.innerText = currentPlayer
            tile.classList.add(`player${currentPlayer}`)
            updateBoard(index)
            handleResultValidation()
            changePlayer()
        }
    }
    
    // 循环div，给其绑定事件，并在次点击事件中调用userAction函数
    tiles.forEach((tile,index)=>{
        tile.addEventListener('click',()=>userAction(tile,index))
    })

    // 游戏结束，清空之前留下的数据
    const resetBoard = () => {
        board = ['','','','','','','','','']
        isGameActive = true
        announcer.classList.add('hide')

        // 这里如果等于O，就调用changePlayer让当前玩家变回X
        if(currentPlayer === 'O'){
            changePlayer()
        }

        tiles.forEach(tile=>{
            tile.innerText = ''
            tile.classList.remove('playerX')
            tile.classList.remove('playerO')
        })
    }

    // 在按钮绑定的点击事件中调用resetBoard方法。
    resetButton.addEventListener('click',resetBoard)
</script>
</html>